<template>
  <div class="common-layout">
    <el-container>
      <el-header class="el_header"> <SysHeader></SysHeader></el-header>
      <el-container>
        <el-aside class="el_aside"><SysAside ref="menu" @SetLabel="SetLabel"></SysAside></el-aside>
        <el-main class="el_main" style="position:relative;"> 
          <Navigation :label1="label1" :label2="label2"></Navigation>
         <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Navigation from '@/components/Navigation.vue';
import SysAside from '../components/SysAside.vue'
import SysHeader from '../components/SysHeader.vue';
import { ref } from 'vue';
let label1=ref('基础信息')
let label2=ref('楼栋管理')

function SetLabel(l1,l2){
  label1.value=l1
  label2.value=l2
}

</script>

<style scoped>
.common-layout{
   background-color: rgba(224, 225, 233, 0.3);
   height: 100vh;
}
.el_header{
  width: 100%;
  padding: 3px 3px;
}
.el_aside{
  height: calc(100vh - 60px);
  background-color: #000000;
  width:200px;
}
.el_main{
  padding-top: 0;
}
</style>